<script setup>
  import {ref, computed} from 'vue'
  const price = ref(10);
  const taxRate = ref(0.1);

  // 计算属性，包含 getter 和 setter
  const priceWithTax = computed({
    get() {
      console.log('进入get方法......')
      return price.value * taxRate.value;
    },
    set(newValue) {
      console.log('进入set方法......')
      // 当设置新值时，更新 price 和 taxRate
      price.value = newValue;
      console.log('price.value = ' + price.value);
    }
  });

  let fun1 = () => {
    console.log('price.value = ' + price.value);
    console.log('结果为：' + priceWithTax.value);  // 输出：12 (10 * 1.2)
  }

  // 修改计算属性的值
  let fun2 = () => {
    priceWithTax.value = 15;
    console.log('结果为：' + priceWithTax.value);  // 输出：12.5 (15 / 1.2)
  }
</script>

<template>
  <div>
    <input v-bind:type="'button'" @click="fun1()" v-bind:value="'获取原始计算属性的值走get方法'"/>
    <input v-bind:type="'button'" @click="fun2()" v-bind:value="'获取修改后的计算属性的值走set方法'"/>
  </div>
</template>

<style scoped>
</style>
